<template>
  <div class="LeftMenu">
    <ul class="left-ment-list">
      <li
        v-for="(item, index) in msg_list"
        :key="item.type"
        :class="activeClass == index ? 'active' : ''"
        @click="checkContent(index,item.path)"
      >
        <span class="solid" v-if="activeClass == index"></span>
        <span style="marginLeft:14px">{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getLocalStorage, setLocalStorage } from "../../utils/storage";
// 导出模块
export default {
  // 模块名字
  name: "LeftMenu",
  // 模块数据
  data() {
    //数据
    return {
      msg_list: [
        {
          type: "1",
          title: this.$t("message.Menu.cad"),
          path: "/HomePageView",
          userType:"1"
        },
        {
          type: "2",
          title: this.$t("message.Menu.bh"),
          path: "/FunctionPageView",
          userType:"1"
        },
        {
          type: "3",
          title: this.$t("message.Menu.ms"),
          path: "/FunctionPageView",
          userType:"1"
        },
        {
          type: "4",
          title: this.$t("message.Menu.ll"),
          path: "/FunctionPageView",
          userType:"1"
        },
        {
          type: "5",
          title: this.$t("message.Menu.user"),
          path: "/UserPageView",
          userType:"0"
        },
        {
          type: "6",
          title: this.$t("message.Menu.qx"),
          path: "/FunctionPageView",
          userType:"0"
        },
      ],
      activeClass: getLocalStorage('activeClass'),
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    checkContent(index, path) {
      this.activeClass = index;
      setLocalStorage('activeClass', index)
      if (path) {
        this.$router.push(path);
      }
    }, 
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    setLocalStorage('activeClass', 0)
    // console.log(getLocalStorage('accType'))
    if(getLocalStorage('accType') == "2"){
      this.msg_list.splice(5,1)
      this.msg_list.splice(4,1)
     }
  },
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
};
</script>
<style  lang="scss" scoped>
.LeftMenu {
  width: 256px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border-right: 1px solid #b4b4b4;
  .left-ment-list {
    margin-top: 32px;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 208px;
      height: 56px;
      font-size: 14px;
      text-align: center;
      line-height: 56px;
      color: rgba(0, 0, 0, 0.85);
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      margin: 0 auto;
      margin-bottom: 16px;
      cursor: pointer;
      border: 1px solid #dcdcdc;
      .solid {
        width: 2px;
        height: 20px;
        background: rgba(255, 255, 255, 1);
      }
    }
    .active {
      background: rgba(188, 0, 15, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
    }
  }
}
</style>
